{% extends 'base/backstage.html' %}
{% block title %}登录一下吧{% endblock %}
{% block bodys %}
    <div class="login text-white">
        <a class="hiddenanchor" id="signup"></a>
        <a class="hiddenanchor" id="signin"></a>

        <div class="login_wrapper">
            <div class="animate form login_form">
                <section class="login_content">
                    {% macro render_field(field) %} <!-- 定义字段宏 -->
                        <dd>{{ field(**kwargs)|safe }}
                            {% if field.errors %}
                                <ul class=errors>
                                    {% for error in field.errors %}
                                        <li>{{ error }}</li>
                                    {% endfor %}
                                </ul>
                            {% endif %}
                        </dd>
                    {% endmacro %}
                    <form method="POST">
                        {{ form.csrf_token }}
                        <h1>登录</h1>
                        <div>
                            {{ render_field(form.username) }}
                        </div>
                        <div>
                            {{ render_field(form.password) }}

                        </div>
                        <div>
                            {% if emsg %}  <!-- 如果有错误信息 则显示 -->
                                <span class="bg-red">{{ emsg }}</span>
                            {% endif %}
                        </div>
                        <div>
                            <input class="btn btn-success submit" type="submit" value="登录">
                            <a class="reset_pass text-white" href="#">忘记密码？</a>
                        </div>
                        <div class="clearfix"></div>
                        <div class="separator">
                            <div class="clearfix"></div>
                            <div>
                                <h1><i class="fa-brands fa-kickstarter"></i> 登录到后台</h1>
                                <div><a class="link-secondary text-white" href="https://beian.miit.gov.cn/"
                                        target="_blank">豫ICP备2022028429号-1</a>
                                    <div>Copyright &copy; 2023
                                        qyin.top
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </section>
            </div>

            <div id="register" class="animate form registration_form">
                <section class="login_content">
                    <form>
                        <h1>Create Account</h1>
                        <div>
                            <input type="text" class="form-control" placeholder="Username" required=""/>
                        </div>
                        <div>
                            <input type="email" class="form-control" placeholder="Email" required=""/>
                        </div>
                        <div>
                            <input type="password" class="form-control" placeholder="Password" required=""/>
                        </div>
                        <div>
                            <a class="btn btn-default submit" href="index.html">Submit</a>
                        </div>

                        <div class="clearfix"></div>

                        <div class="separator">
                            <p class="change_link">Already a member ?
                                <a href="#signin" class="to_register"> Log in </a>
                            </p>

                            <div class="clearfix"></div>
                            <br/>

                            <div>
                                <h1><i class="fa fa-paw"></i> Gentelella Alela!</h1>
                                <p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 4 template. Privacy and
                                    Terms</p>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </div>
{% endblock %}